<%--
  Created by IntelliJ IDEA.
  User: 赵懒洋
  Date: 2020/7/28
  Time: 21:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
</head>
<!-- 引入 echarts.js -->
<script src="../../static/admin/js/echarts.js"></script>
<body>
<div class="wrap-container welcome-container">
    <div class="row">
        <div class="welcome-left-container col-lg-9">
            <div id="month_value" class="data-show" style="display:none">7</div>
            <!--图表-->
            <div class="chart-panel panel panel-default" style="width: 100%;height: 100%;">
                <div class="panel-body" id="chart" style="height: 376px;"></div>
            </div>
        </div>
    </div>
</div>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/admin/lib/echarts/echarts.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

    // 一进入网页，发送请求
    $(document).ready(function () {
        sendAjax();
    });

    function sendAjax() {
        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/date/findWeekByWeek",
            type:"GET",
            data:{month:$("#month_value").text()},
            dataType:"json",
            success:function (result) {
                console.log("===="+result[0])
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('chart'));

                option3 = {
                    title: {
                        text: '每天占比变化',
                        subtext: '周一 ~ 周日',
                        top: 10,
                        left: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,250,0.2)'
                    },
                    legend: {
                        type: 'scroll',
                        bottom: 10,
                        data: (function (){
                            var list = [];
                            for (var i = 1; i <=12; i++) {
                                list.push(i + '');
                            }
                            return list;
                        })()
                    },
                    visualMap: {
                        top: 'middle',
                        right: 10,
                        color: ['red', 'yellow'],
                        calculable: true
                    },
                    radar: {
                        indicator: [
                            { text: 'Monday', max: 400},
                            { text: 'Tuesday', max: 400},
                            { text: 'Wednesday', max: 400},
                            { text: 'Thursday', max: 400},
                            { text: 'Friday', max: 400},
                            { text: 'Saturday', max: 400},
                            { text: 'Sunday', max: 400}
                        ]
                    },
                    series: (function (){
                        var series = [];
                        for (var i = 1; i <= 12; i++) {
                            series.push({
                                name: '浏览器（数据纯属虚构）',
                                type: 'radar',
                                symbol: 'none',
                                lineStyle: {
                                    width: 1
                                },
                                emphasis: {
                                    areaStyle: {
                                        color: 'rgba(0,250,0,0.3)'
                                    }
                                },
                                data: [{
                                    value: [
                                        result[1] + 100,
                                        result[2] + 100,
                                        result[3] + 100,
                                        result[4] + 100,
                                        result[5] + 100,
                                        result[6] + 100,
                                        result[0] + 100
                                    ],
                                    name: i + ''
                                }]
                            });
                        }
                        return series;
                    })()
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option3);
                myChart.on('click',(param) => {
                    console.log(param.data.name);
                    $("#month_value").text(param.data.name);
                    sendAjax();
                });
            },
            error:function () {
                alert("异步请求失败！")
            }
        });
    }
</script>
</body>

<!---->
</html>
